<template>
  <div class="detail-bottom-bar">
    <div class="de-left">
      <little-box>
        <img slot="littleImg" src="~assets/img/detail/cart.png" />
        <div slot="littleTitle">客服</div>
      </little-box>
      <little-box>
        <img slot="littleImg" src="~assets/img/detail/cart.png" />
        <div slot="littleTitle">购物车</div>
      </little-box>
      <little-box>
        <img slot="littleImg" src="~assets/img/detail/cart.png" />
        <div slot="littleTitle">收藏</div>
      </little-box>
    </div>
    <div class="de-right">
      <div class="join-car" @click="addToCar">加入购物车</div>
      <div class="buy-now">立即购买</div>
    </div>
  </div>
</template>

<script>
import LittleBox from "components/common/littleBox/LittleBox";
export default {
  components: { LittleBox },
  methods: {
    addToCar() {
      this.$emit("addToCar");
    },
  },
};
</script>

<style scoped>
.detail-bottom-bar {
  height: 50px;
  background-color: #f6f6f6;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  display: flex;
  box-shadow: 0 -1px 1px rgba(100, 100, 100, 0.2);
}
.de-left {
  flex: 1;
  display: flex;
  width: 30%;
  height: 50px;
}
.de-right {
  flex: 1;
  display: flex;
  width: 50%;
  border: 1px solid #fff;
  border-radius: 25px;
  line-height: 50px;
  text-align: center;
}
.de-right div {
  flex: 1;
  color: #fff;
}
.join-car {
  background-color: orange;
}
.buy-now {
  background-color: red;
}
</style>